<style scoped>
    @import '../../styles/tasks.css';
</style>

<template>
    <div class="layout-content-main" v-if="spinShow">
        <Spin fix>加载中...</Spin>
    </div>
    <div class="layout-content-main" v-else-if="!spinShow">
        <div class="tasks-table-tool">

            <Button type="primary" @click="edit('','')">
                <Icon type="android-add"></Icon>
                新增
            </Button>
            <Button type="primary" @click="setHightSearch">
                <Icon type="ios-search"></Icon>
                高级查询
            </Button>
        </div>
        <template v-if="hsearch">
            <Card class="query-card">
                <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                    <Form-item prop="user">
                        <Input type="text" v-model="formInline.user" placeholder="Username">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item prop="password">
                        <Input type="password" v-model="formInline.password" placeholder="Password">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item>
                        <Button type="primary">登录</Button>
                    </Form-item>
                </Form>
            </Card>
        </template>
        <template>
            <Table border :columns="taskColumns" :data="taskData" :size="tableSize" :stripe="showStripe"
                   no-data-text="无数据" no-filtered-data-text="无符合条件的数据">
            </Table>

            <div style="margin: 10px;float: left;">
                <Page :total="page_total" :current="page_current" :page-size="page_size"
                      :page-size-opts="[5,10,15,20,50,100]" show-sizer show-elevator></Page>
            </div>
        </template>
    </div>
</template>

<script>
    import axios from 'axios';

    var http = axios.create({
        baseURL: 'http://localhost',
        headers: {
            post: {'Content-Type': 'application/x-www-form-urlencoded'}
        }
    });

    export default {
        data() {
            var that = this;
            return {
                formInline: {
                    user: '',
                    password: ''
                },
                editForm: {
                    JOB_NAME: '',
                    JOB_GROUP: 'DEFAULT_JOB_GROUP',
                    CRON_EXPRESSION: '',
                    JOB_DATA: {
                        DEFAULT_JOB_NAME_KEY: '',
                        DEFAULT_JOB_SCRIPT_KEY: ''
                    },
                    DESCRIPTION: ''
                },
                page_current: 1,
                page_total: 100,
                page_size: 15,
                spinShow: false,
                hsearch: false,
                tableSize: 'small',
                fixedHeader: true,
                showStripe: true,
                taskColumns: [
                    {
                        title: '操作', key: 'action', width: 130, align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        icon: 'ios-compose-outline',
                                        size: 'small'
                                    },
                                    nativeOn: {
                                        click: () => {
                                            that.edit(that.taskData[params.index].JOB_NAME, that.taskData[params.index].JOB_GROUP);
                                        }
                                    }
                                }, '改'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        icon: 'ios-trash-outline',
                                        size: 'small'
                                    },
                                    nativeOn: {
                                        click: () => {
                                            this.show(params.index);
                                        }
                                    }
                                }, '删')
                            ]);
                        }
                    },

                    {title: '名称', key: 'JOB_NAME'},
                    {title: '分组', key: 'JOB_GROUP'},
                    {title: '表达式', key: 'CRON_EXPRESSION', align: "center"},
                    {title: '状态', key: 'TRIGGER_STATE', align: "center"},
                    {title: '添加时间', key: 'START_TIME', align: "left"},
                    {title: '上次', key: 'PREV_FIRE_TIME', align: "left"},
                    {title: '下次', key: 'NEXT_FIRE_TIME', align: "left"},
                    {title: '描述', key: 'DESCRIPTION', align: "left"}
                ],
                taskData: []
            }
        },
        methods: {
            show(index) {
                console.log(this.taskData[index].name)
            },
            queryData(page, row) {
                var that = this;
                that.spinShow = true
                http.get('/job/list.do?page=' + page + "&rows=" + row).catch(function (thrown) {
                    console.log('catch', thrown.message);
                    that.spinShow = false
                }).then(function (response) {
                    var pageResult = response.data.result;
                    that.page_current = pageResult.number;
                    that.page_total = pageResult.totalPages;
                    that.page_size = pageResult.size;
                    that.taskData = pageResult.content;
                    that.spinShow = false
                })
            },
            setHightSearch() {
                if (this.hsearch) {
                    this.hsearch = false;
                } else {
                    this.hsearch = true;
                }
            },
            edit(name, group) {
                var that = this;
                if (name == '') {//新增
                    that.editForm = {
                        JOB_NAME: '',
                        JOB_GROUP: 'DEFAULT_JOB_GROUP',
                        CRON_EXPRESSION: '',
                        JOB_DATA: {
                            DEFAULT_JOB_NAME_KEY: '',
                            DEFAULT_JOB_SCRIPT_KEY: ''
                        },
                        DESCRIPTION: ''
                    }
                } else {//修改
                    http.get('/job/get.do?name=' + name + "&group=" + group).catch(function (thrown) {
                        console.log('catch', thrown.message);
                        that.spinShow = false
                    }).then(function (response) {
                        var pageResult = response.data.result;
                        that.editForm = pageResult;
                    })
                }
                this.rightPanel({path: '/task-edit', query: {name: name, group: group}})

            },
            rightPanel(router_path) {
                this.$router.push(router_path)
            }
        },
        mounted() {
            this.queryData(this.page_current, this.page_size)
        }

    }
</script>